<template>
  <div class="cesium-viewer-wapper">
    <div id="cesium-viewer" />
    <viewerSettingSidebar top="10em" :viewerSource="viewerSource" />
    <div class="tool-box-top-left">
      <!-- <div class="select-box-wrapper"><select-box :options="flyOptions" style="margin-right: 0;" /></div> -->
      <!--      <div class="select-box-wrapper"><a-checkbox v-model:checked="viewModel.translucencyEnabled">translucencyEnabled</a-checkbox></div>
      <div class="select-box-wrapper"><a-checkbox v-model:checked="viewModel.fadeByDistance">fadeByDistance</a-checkbox></div>
      <div class="select-box-wrapper"><a-checkbox v-model:checked="viewModel.showVectorData">showVectorData</a-checkbox></div> -->
      <div class="select-box-wrapper"><SliderBar v-model:value="height" :min="-1000" :max="1000" :step="10">height</SliderBar></div>
    </div>
    <GlobeRotater showTime :viewerSource="viewerSource" />
    <MousePosition show :viewerSource="viewerSource" />
  </div>
</template>

<script>
import * as Cesium from '@cesiumjs';
import { defineComponent, ref, reactive, watch, toRaw } from 'vue';
import { SelectBox, SliderBar } from '@components/widgets';
import { MousePosition, viewerSettingSidebar, GlobeRotater } from '@g3x/g3v/ui';
import { G3V } from '@g3x';
import { viewerMixin } from '@mixins';
// import merge from '@g3x/utils/merge';

const $g3vOptions = {
  defaultViewRectangle: G3V.defaultViews.global.china.rectangle,
  viewers: [
    {
      dom: 'cesium-viewer',
      name: 'viewer1',
      title: 'viewer#01',
      viewer: {
        imagery: { type: 'default', options: { brightness: 1, show: false } },
        imageryProvider: null,
        // terrain: { type: 'default', options: { requestVertexNormals: true, requestWaterMask: true } },
        terrainProvider: null,
        shadows: false,
        scene3DOnly: true,
        // sceneMode: Cesium.SceneMode.SCENE2D,
        animation: false
      },
      layers: [],
      globe: {
        depthTestAgainstTerrain: false,
        enableLighting: true //启用以太阳为光源的地球
      },
      bottomContainer: false,
      navigation: {
        defaultResetView: null //flyHome
      },
      shortcutAction: false,
      hideLayers: false
    }
  ]
};

export default defineComponent({
  name: 'SanMiguel', //
  mixins: [viewerMixin],
  components: { SelectBox, SliderBar, viewerSettingSidebar, GlobeRotater, MousePosition },
  props: {},
  setup() {
    return {};
  },
  data() {
    return {
      height: 0
    };
  },
  computed: {},
  watch: {},
  methods: {
    g3vOptionsGet(original) {
      // const g3vOptions = merge($g3vOptions, true);
      return $g3vOptions;
    },
    onViewerInited() {
      console.log('gdp onViewerInited');
    },
    initEffects() {
      const vm = this;
      const { viewer, g3vViewer } = vm;
      const scene = viewer.scene;
      const globe = scene.globe;

      // Set the initial camera view to look at Manhattan
      var initialPosition = Cesium.Cartesian3.fromDegrees(-74.01881302800248, 40.69114333714821, 753);
      var initialOrientation = new Cesium.HeadingPitchRoll.fromDegrees(21.27879878293835, -21.34390550872461, 0.0716951918898415);
      viewer.scene.camera.setView({
        destination: initialPosition,
        orientation: initialOrientation,
        endTransform: Cesium.Matrix4.IDENTITY
      });

      // Load the NYC buildings tileset
      var tileset = new Cesium.Cesium3DTileset({
        url: Cesium.IonResource.fromAssetId(75343)
      });
      viewer.scene.primitives.add(tileset);

      // HTML overlay for showing feature name on mouseover
      var nameOverlay = document.createElement('div');
      viewer.container.appendChild(nameOverlay);
      nameOverlay.className = 'backdrop';
      nameOverlay.style.display = 'none';
      nameOverlay.style.position = 'absolute';
      nameOverlay.style.bottom = '0';
      nameOverlay.style.left = '0';
      nameOverlay.style['pointer-events'] = 'none';
      nameOverlay.style.padding = '4px';
      nameOverlay.style.backgroundColor = 'black';

      // Information about the currently selected feature
      var selected = {
        feature: undefined,
        originalColor: new Cesium.Color()
      };

      // An entity object which will hold info about the currently selected feature for infobox display
      var selectedEntity = new Cesium.Entity();

      // Get default left click handler for when a feature is not picked on left click
      var clickHandler = viewer.screenSpaceEventHandler.getInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK);

      // If silhouettes are supported, silhouette features in blue on mouse over and silhouette green on mouse click.
      // If silhouettes are not supported, change the feature color to yellow on mouse over and green on mouse click.
      if (Cesium.PostProcessStageLibrary.isSilhouetteSupported(viewer.scene)) {
        // Silhouettes are supported
        var silhouetteBlue = Cesium.PostProcessStageLibrary.createEdgeDetectionStage();
        silhouetteBlue.uniforms.color = Cesium.Color.BLUE;
        silhouetteBlue.uniforms.length = 0.01;
        silhouetteBlue.selected = [];

        var silhouetteGreen = Cesium.PostProcessStageLibrary.createEdgeDetectionStage();
        silhouetteGreen.uniforms.color = Cesium.Color.LIME;
        silhouetteGreen.uniforms.length = 0.01;
        silhouetteGreen.selected = [];

        // viewer.scene.postProcessStages.add(Cesium.PostProcessStageLibrary.createSilhouetteStage([silhouetteBlue, silhouetteGreen]));

        // Silhouette a feature blue on hover.
        viewer.screenSpaceEventHandler.setInputAction((movement)=>{
          // If a feature was previously highlighted, undo the highlight
          silhouetteBlue.selected = [];

          if(Cesium.defined(selected.feature)){
            selected.feature.color = Cesium.Color.clone(selected.originalColor, selected.feature.color);
            selected.feature = undefined;
          }

          // Pick a new feature
          var pickedFeature = viewer.scene.pick(movement.endPosition);
          if (!Cesium.defined(pickedFeature)) {
            nameOverlay.style.display = 'none';
            return;
          }

          // A feature was picked, so show it's overlay content
          nameOverlay.style.display = 'block';
          nameOverlay.style.bottom = viewer.canvas.clientHeight - movement.endPosition.y + 'px';
          nameOverlay.style.left = movement.endPosition.x + 'px';
          var name = pickedFeature.getProperty('BIN');
          nameOverlay.textContent = name;

          // Highlight the feature if it's not already selected.
          if (pickedFeature !== selected.feature) {
            silhouetteBlue.selected = [pickedFeature];
            selected.feature = pickedFeature;
            Cesium.Color.clone(pickedFeature.color, selected.originalColor);
            pickedFeature.color = Cesium.Color.clone(Cesium.Color.YELLOW, pickedFeature.color);
          }
        }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);

        // Silhouette a feature on selection and show metadata in the InfoBox.
        viewer.screenSpaceEventHandler.setInputAction((movement) => {
          // If a feature was previously selected, undo the highlight
          silhouetteGreen.selected = [];

          // Pick a new feature
          var pickedFeature = viewer.scene.pick(movement.position);
          if (!Cesium.defined(pickedFeature)) {
            clickHandler(movement);
            return;
          }

          // Select the feature if it's not already selected
          if (silhouetteGreen.selected[0] === pickedFeature) {
            return;
          }

          // Save the selected feature's original color
          var highlightedFeature = silhouetteBlue.selected[0];
          if (pickedFeature === highlightedFeature) {
            silhouetteBlue.selected = [];
          }

          // Highlight newly selected feature
          silhouetteGreen.selected = [pickedFeature];

          // Set feature infobox description
          var featureName = pickedFeature.getProperty('name');
          selectedEntity.name = featureName;
          selectedEntity.description = 'Loading <div class="cesium-infoBox-loading"></div>';
          viewer.selectedEntity = selectedEntity;
          selectedEntity.description =
            '<table class="cesium-infoBox-defaultTable"><tbody>' +
            '<tr><th>BIN</th><td>' +
            pickedFeature.getProperty('BIN') +
            '</td></tr>' +
            '<tr><th>DOITT ID</th><td>' +
            pickedFeature.getProperty('DOITT_ID') +
            '</td></tr>' +
            '<tr><th>SOURCE ID</th><td>' +
            pickedFeature.getProperty('SOURCE_ID') +
            '</td></tr>' +
            '</tbody></table>';
        }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
      } else {
        // Silhouettes are not supported. Instead, change the feature color.

        // Information about the currently highlighted feature
        var highlighted = {
          feature: undefined,
          originalColor: new Cesium.Color()
        };

        // Color a feature yellow on hover.
        // MOUSE_MOVE
        viewer.screenSpaceEventHandler.setInputAction((movement)=>{
          // If a feature was previously highlighted, undo the highlight
          if (Cesium.defined(highlighted.feature)) {
            highlighted.feature.color = highlighted.originalColor;
            highlighted.feature = undefined;
          }
          // Pick a new feature
          var pickedFeature = viewer.scene.pick(movement.endPosition);
          if (!Cesium.defined(pickedFeature)) {
            nameOverlay.style.display = 'none';
            return;
          }
          // A feature was picked, so show it's overlay content
          nameOverlay.style.display = 'block';
          nameOverlay.style.bottom = viewer.canvas.clientHeight - movement.endPosition.y + 'px';
          nameOverlay.style.left = movement.endPosition.x + 'px';
          var name = pickedFeature.getProperty('name');
          if (!Cesium.defined(name)) {
            name = pickedFeature.getProperty('id');
          }
          nameOverlay.textContent = name;
          // Highlight the feature if it's not already selected.
          if (pickedFeature !== selected.feature) {
            highlighted.feature = pickedFeature;
            Cesium.Color.clone(pickedFeature.color, highlighted.originalColor);
            pickedFeature.color = Cesium.Color.YELLOW;
          }
        }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);

        // Color a feature on selection and show metadata in the InfoBox.
        // LEFT_CLICK
        viewer.screenSpaceEventHandler.setInputAction((movement)=>{
          // If a feature was previously selected, undo the highlight
          if (Cesium.defined(selected.feature)) {
            selected.feature.color = selected.originalColor;
            selected.feature = undefined;
          }
          // Pick a new feature
          var pickedFeature = viewer.scene.pick(movement.position);
          if (!Cesium.defined(pickedFeature)) {
            clickHandler(movement);
            return;
          }
          // Select the feature if it's not already selected
          if (selected.feature === pickedFeature) {
            return;
          }
          selected.feature = pickedFeature;
          // Save the selected feature's original color
          if (pickedFeature === highlighted.feature) {
            Cesium.Color.clone(highlighted.originalColor, selected.originalColor);
            highlighted.feature = undefined;
          } else {
            Cesium.Color.clone(pickedFeature.color, selected.originalColor);
          }
          // Highlight newly selected feature
          pickedFeature.color = Cesium.Color.LIME;
          // Set feature infobox description
          var featureName = pickedFeature.getProperty('name');
          selectedEntity.name = featureName;
          selectedEntity.description = 'Loading <div class="cesium-infoBox-loading"></div>';
          viewer.selectedEntity = selectedEntity;
          selectedEntity.description =
            '<table class="cesium-infoBox-defaultTable"><tbody>' +
            '<tr><th>BIN</th><td>' +
            pickedFeature.getProperty('BIN') +
            '</td></tr>' +
            '<tr><th>DOITT ID</th><td>' +
            pickedFeature.getProperty('DOITT_ID') +
            '</td></tr>' +
            '<tr><th>SOURCE ID</th><td>' +
            pickedFeature.getProperty('SOURCE_ID') +
            '</td></tr>' +
            '<tr><th>Longitude</th><td>' +
            pickedFeature.getProperty('longitude') +
            '</td></tr>' +
            '<tr><th>Latitude</th><td>' +
            pickedFeature.getProperty('latitude') +
            '</td></tr>' +
            '<tr><th>Height</th><td>' +
            pickedFeature.getProperty('height') +
            '</td></tr>' +
            '<tr><th>Terrain Height (Ellipsoid)</th><td>' +
            pickedFeature.getProperty('TerrainHeight') +
            '</td></tr>' +
            '</tbody></table>';
        }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
      }
    }
  }
});
</script>

<style lang="less">
.cesium-viewer-wapper {
  .tool-box-top-left {
    min-width: 15em;
  }
}
</style>
